<template>
	<view class="detail">
        <SRV-topbar title="充值中心" :isLeft="true"></SRV-topbar>
		<view class="con-box input-box">
			<view class="con-left"> 充值金额： </view>
			<input class="con-input"  @change="checkPrice" v-model="formDate.money" type="number" value="" placeholder="请输入充值金额" />
		</view>
		<view class="con-box">
			<view class="con-title"> 
                <view>快捷充值</view>
                <view style="font-size: 38rpx;">本月累计充值：<text style="color: #fff003f;">￥{{totalMoney}}</text></view>
            </view>
			<view class="con-con">
				<view class="con-top-flex" v-for="(item,index) in quickList" :key="index"  @click="setMoney(item.money)">
					<view class="con-top-num"> 
                        <image class="imageIcon" src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/fire.png" mode="aspectFill" v-if="item.activity_id > 0"></image>
                        <text>￥{{item.title}} </text>
                    </view>
                    <view class="con-top-num con-top-remark" v-if="item.item.remark != ''"> {{item.remark}} </view>
				</view>
                <view class="con-top-flex" v-if="isSendHdq">
                	<view class="con-top-num con-top-remark"> 
                        <text>互动券赠送日期至</text>
                    </view>
                    <view class="con-top-num con-top-remark"> {{endDate}} </view>
                </view>
			</view>
		</view>
        <view class="con-con" v-if="vipActivity.isShow">
        	<view class="con-flex" @click="jump(vipActivity.jumpType, vipActivity.jumpLink)">
                <image class="con-img" src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/activity.png" mode=""></image>
                <view class="con-con-left">
                     {{vipActivity.key}}
                </view>
                <view class="con-con-right">
                    <view class="con-num">{{vipActivity.title}} 
                    <view class="vipBtn">查看礼品</view></view>
                    <view class="con-p"> {{vipActivity.remark}} </view>
                </view>
                <view class="con-yyw" v-if="vipActivity.is_join == 1"> 已参与 </view>
        	</view>
        </view>
		<view class="remark" v-if="meetingInfo.isShow">
			<view class="con-title"> {{meetingInfo.title}} </view>
			<view class="con-con">
				<view class="con-flex" v-for="(item,index) in meetingInfo.list" :key="index"  @click="setMoney(item.money)">
                    <image class="con-img" src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/activity.png" mode=""></image>
                    <view class="con-con-left">
                         {{item.key}}
                    </view>
                    <view class="con-con-right">
                        <view class="con-num">{{item.title}} </view>
                        <view class="con-p"> {{item.remark}} </view>
                    </view>
                    <view class="con-yyw" v-if="item.is_join == 1"> 已参与 </view>
		            <!-- <image class="imageIcon" src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/fire.png" mode="aspectFill" v-if="item.is_join"></image>
					<view class="con-top-num"> {{item.title}} </view>
                    <view class="con-top-num"> {{item.remark}} </view> -->
				</view>
			</view>
		</view>
		<view class="remark"> 
			<view class="" style="line-height: 60rpx; font-size: 32rpx;"> 温馨提示： </view>
			<view class="" style="line-height: 54rpx; padding: 0 20rpx;" v-for="(item, index) in remarkList" :key="index"> {{item}} </view>
		</view>
		
		<view class="but-box" :style="'height:' + bottomHeight + 'rpx;'">
			<view class="but" @click="recharge()">充值</view>
		</view>
		
	</view>
</template>

<script>
	let _self = '';
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import commonPay from '../../static/commonPay.js';
	export default {
		data() {
			return {
				bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
				
				formDate: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
                    activity_id: 0,
					money: '',
				},
				quickList: [],
                activityRemarkList: [],
                meetingInfo: {isShow: false},
				remarkList: [],
                vipActivity:{isShow: false},
                isSendHdq: false,
                endDate: '',
                totalMoney: '0.00',
                payData: {
                	appkey: uni.getStorageSync('appkey'),
                	'access-token': uni.getStorageSync('access-token'),
                	pay_type: '',
                	pay_id: '',
                	is_use_hdq: 0,
                    is_use_judge: 0,
                	payment_type: 1,
                    jumpFile: '',
                },
			}
		},
		methods: {
			getMain() {
				serve.request({
					url: '/member/recharge/main',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					},
                    v: '/v3',
				}).then(res => {
					_self.quickList = res.data.quickList;
					// _self.activityRemarkList = res.data.activityRemark != '' ? res.data.activityRemark.split("\n\r") : [];
                    _self.meetingInfo = res.data.meetingInfo;
                    _self.vipActivity = res.data.vipActivity;
					_self.remarkList = res.data.remark.split("\n\r");
                    _self.isSendHdq = res.data.isSendHdq;
                    _self.endDate = res.data.endDate;
                    _self.totalMoney = res.data.totalMoney;
				});
			},
            setMoney(k) {
                // let item = _self.quickList[k];
                // if(item.activity_id > 0) {
                //     uni.showToast({
                //         title: item.remark,
                //         icon: 'none',
                //     });
                // }
                // _self.formDate.money = item.money;
                // _self.formDate.activity_id = item.activity_id;
                if(k == 'vip') {
                    uni.navigateTo({
                        url: '/pages/my/vip'
                    });
                    return ;
                }
                _self.formDate.money = k;
            },
			/* 充值 */
			recharge(){
				if(_self.payData.pay_id != '') {
					commonPay.payFun(_self.payData, _self.payData.jumpFile);
					return ;
				}
				serve.request({
					url: '/member/recharge/create',
					data: _self.formDate,
                    v: '/v3',
				}).then(res => {
					if(res.code != 200) {
						uni.showModal({
						    title: '提示',
						    content: res.message,
							showCancel: false,
							success: function(res) {}
						});
						return ;
					}
					_self.payData.pay_type = res.data.pay_type;
					_self.payData.pay_id = res.data.pay_id;
					_self.payData.jumpFile = res.data.jumpFile;
					commonPay.payFun(_self.payData, _self.payData.jumpFile);
				});
			},
			checkPrice: function(e) {
				let price = e.detail.value;
				if (price.indexOf('.') != -1){
					let a = price.substring(0, price.indexOf('.'));
					_self.formDate.money = a;
				}else{
					_self.formDate.money = price;
				}
				console.info(_self.formDate.money);
				_self.$forceUpdate();
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			_self = this;
			_self.formDate.money = options.money || '';
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				_self.bottomHeight = 178;
			}
			_self.getMain();
		},
		onPullDownRefresh() {
			_self.getMain();
		},
	}
</script>

<style scoped>
	.detail {
		/* padding: 0 36rpx; */
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	

	
	.con-box{
		position: relative;
	} 
	.input-box{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-bottom: 2rpx solid #ededed;
		padding: 16rpx 0;
	}
	.con-left{
		padding-right: 30rpx;
	}
	.con-input{
		width: 460rpx;
		height: 60rpx;
		border: 2rpx solid #ededed;
		color: #dd6161;
		font-size: 30rpx;
		padding-left: 20rpx;
	}
	.con-box{margin: 20rpx;}
	.con-title{
		font-size: 30rpx;
        display: flex;
        justify-content: space-between;
	}
	.con-con{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
        justify-content: flex-start;
	}
	.con-top-flex{
        width: 21vw;
        height: 80rpx;
        background: #f5f5f5;
        padding: 20rpx;
        font-size: 24rpx;
        border-radius: 8rpx;
        margin: 20rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: column;
        position: relative;
        color: #333;
        text-align: center;
	}
    .con-top-flex:nth-last-child(2) {
        width: 35vw;
    }
    .con-top-flex:nth-last-child(1) {
        width: 35vw;
    }
	.con-top-num{
		color: #333;
		font-size: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
    .con-top-remark{
        color: #3a9813;
    }
	.con-flex{
		width: 100vw;
		min-height: 120rpx;
		background: #f5f5f5;
		padding: 20rpx 16rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
		margin: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* flex-direction: column; */
		position: relative;
		color: #333;
		text-align: center;
	}
	.con-num{
		color: #333;
		font-size: 40rpx;
        position: relative;
	}
    .vipBtn {
        position: absolute;
        right: 50rpx;
        top: 50rpx;
        border: 1rpx solid #FFBC00;
        padding: 4rpx 10rpx;
        font-size: 32rpx;
        border-radius: 20rpx;
        background: #FFBC00;
    }
	.con-img{
		position: absolute;
		width: 60rpx;
		height: 60rpx;
		left: -2rpx;
		top: -6rpx;
	}
	.con-con-left{
		flex: 1;
		height: 100%;
		font-size: 42rpx;
	}
	.con-con-right{
		flex: 6.5;
		border-left: 2rpx solid #000000;
		text-align: left;
		padding-left: 20rpx;
	}
	.con-yyw{
		position: absolute;
		transform: rotate(-45deg);
		border-bottom: 2rpx solid #FF5F60;
		font-size: 36rpx;
		padding-bottom: 2rpx;
		color: #FF5F60;
		bottom: 34rpx;
		right: 8rpx;
	}
	
	.but-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #FFBC00;
	}
	.but{
		background: #FFBC00;
		color: #fff;
		border-radius: 0;
		width: 100vw;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
	}
	.medalInfo {
	    width: 80vw;
	    max-height: 90vh;
	    min-height: 30vh;
	    overflow: hidden;
	    z-index: 200;
	}
	.popbox {
	    max-height: 900upx;
	    padding: 20upx;
	    overflow: hidden;
	    position: relative;
	    border-radius: 20upx;
	    background: #fff;
	}
	
	.close {
	    position: absolute;
	    width: 30upx;
	    height: 30upx;
	    right: 50upx;
	    top: 50upx;
	    z-index: 666;
	}
	
	.title {
	    width: 100%;
	    height: 100upx;
	    line-height: 100upx;
	    font-size: 32upx;
		text-align: center;    
		border-bottom: 1rpx dashed #ccc;
	}
	.scroll{
		max-height: 500upx;
	    margin-top: 20upx;
	}
	
	.imageIcon {
		width: 40upx;
		height: 40upx;
	    margin-right: 20rpx;
	}
    .remark {
        margin: 20rpx;
        border-top: 1rpx solid #eaeaea;
        padding-top: 10rpx;
    }
</style>
